<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <a-tabs default-active-key="1" style="background: #fff">
        <a-tab-pane key="1" tab="界面还原">
            <a-layout >
                <a-layout-sider style="background: #fff">
                    <a-card :bordered="false" :style="clientHeight" >
                        <a-timeline>
                            <a-timeline-item @click="clickTest(timeLineItem)" v-for="timeLineItem in timeLineItems" :key="timeLineItem.oplogId">
                                <a-tooltip>
                                    <template slot="title">
                                        点击查看界面还原
                                    </template>
                                    <div>{{timeLineItem.actName}}|{{timeLineItem.operationName}}</div>
                                    <div>{{timeLineItem.opTime}}</div>
                                    <div>操作人:{{timeLineItem.opName}}</div>
                                    <div>{{timeLineItem.authRemarks}}</div>
                                </a-tooltip>
                            </a-timeline-item>
                            <a-timeline-item v-for="doingitem in timeLineDoing" :key="doingitem.executionId">
                                <a-icon slot="dot" type="loading" style="font-size: 16px;" />
                                <div>{{doingitem.actName}}</div>
                                <div>操作人:{{doingitem.assigneeName}}</div>
                                <div>办理中</div>
                            </a-timeline-item>
                        </a-timeline>
                    </a-card>
                </a-layout-sider>
                <a-layout-content style="background: #fff">
                    <a-card :bordered="false" >
                        <div><h2 style="color: blue">{{this.titleRe}}界面还原</h2></div>
                        <component :is="item" v-for="item in allComponents" :key="item"  :formData="formData" :style="clientHeight" />
                    </a-card>
                    <div style="float: right;background: #fff">
                        <a-button style="margin-left: 8px;" type="primary" :style="{ display: acceptDisplay }" icon="check" @click="() =>{this.accept()}">签收</a-button>
                        <a-button style="margin-left: 8px;" type="primary" :style="{ display: auditDisplay }" icon="edit" @click="() =>{this.audit()}">审核</a-button>
                        <a-button style="margin-left: 8px;" type="primary" :style="{ display: entrustDisplay }" icon="user-add" @click="() =>{this.entrust()}">委派</a-button>
                        <a-button style="margin-left: 8px;" type="primary" :style="{ display: transferDisplay }" icon="user" @click="() =>{this.transfer()}">转办</a-button>
                        <a-button style="margin-left: 8px;" type="primary" :style="{ display: callBackDisplay }" icon="rollback" @click="() =>{this.callback()}">驳回</a-button>
                        <a-button style="margin-left: 8px;" type="primary" :style="{ display: apostilleDisplay }" icon="import" @click="() =>{this.apostille()}">加签</a-button>
                    </div>
                </a-layout-content>
                <div>
                    <a-modal
                            title="审核信息"
                            centered
                            style="top: 10px;"
                            width="40%"
                            destroyOnClose
                            v-model="auditVisible"
                            footer=""
                    >
                        <a-form-model ref="modelPage" :model="auditForm"  :label-col="auditLabelCol" :wrapper-col="auditWrapperCol">
                            <a-form-model-item label="下级签收人类型" >
                                <a-input v-model="auditForm.assigneeTypeName" :disabled="true" style="margin-left: 8px;" />
                            </a-form-model-item>
                            <a-form-model-item label="下级签收人">
                                <a-select
                                        placeholder="请选择"
                                        allowClear
                                        v-model="auditForm.assigneeId"
                                        style="margin-left: 8px;"
                                >
                                    <a-select-option v-for="item in dictData.assigneeId" :key="item.assigneeId" :value="item.assigneeId">{{ item.assigneeIdName }}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item label="下级签收用户">
                                <a-select
                                        placeholder="请选择"
                                        allowClear
                                        v-model="auditForm.userId"
                                        style="margin-left: 8px;"
                                >
                                    <a-select-option v-for="item in dictData.userId" :key="item.userId" :value="item.userId">{{ item.userIdName }}</a-select-option>
                                </a-select>
                            </a-form-model-item>
                            <a-form-model-item label="审核意见">
                                <a-textarea  v-model="auditForm.shyj" :rows="4" />
                            </a-form-model-item>
                            <a-form-model-item label="审核操作">
                                <vxe-button @click="approve('1')">审核通过</vxe-button>
                                <vxe-button @click="approve('2')">审核不通过</vxe-button>
                            </a-form-model-item>
                        </a-form-model>
                    </a-modal>
                    <a-modal
                            title="驳回信息"
                            centered
                            style="top: 10px;"
                            width="40%"
                            destroyOnClose
                            v-model="callbackVisible"
                            @ok="callBackSave"
                            cancelText="关闭"
                            okText="驳回"
                    >
                        <a-form-model-item label="驳回环节">
                            <a-select
                                    placeholder="请选择"
                                    allowClear
                                    v-model="auditForm.assigneeId"
                                    style="margin-left: 8px;"
                            >
                                <a-select-option v-for="item in dictData.assigneeId" :key="item.assigneeId" :value="item.assigneeId">{{ item.assigneeIdName }}</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-modal>
                </div>
            </a-layout>
        </a-tab-pane>
        <a-tab-pane key="2" tab="流程展示" force-render>
            <act-flow-image :imagePara="imagePara"/>
        </a-tab-pane>
    </a-tabs>
</template>

<script>
    import { getBatchDict,getListByBusNo,getDataVO} from "@/services/system/api"
    import { getAssigneeList,taskClaim,taskComplete} from "@/services/system/workflowApi"
    import FooterToolBar from '@/components/FooterToolbar'
    import ALayoutSider from "ant-design-vue/es/layout/Sider";
    import MissRePage from "@/pages/overview/MissRePage";
    import ActFlowImage from "@/pages/overview/ActFlowImage";
    export default {
        name: 'CommonAudit',
        props:["comData"],
        components: {
            ALayoutSider,
            FooterToolBar,
            MissRePage,
            ActFlowImage
        },
        data(){
            return{
                //结束日志
                timeLineItems: null,
                //正在进行环节
                timeLineDoing:null,
                //数据字典
                dictData: {},
                //动态组件及数据
                allComponents:["MissRePage"],
                formData:null,
                //按钮隐藏和显示
                acceptDisplay:'none',
                auditDisplay:'',
                entrustDisplay:"",
                transferDisplay:'',
                callBackDisplay:'',
                apostilleDisplay:'',
                //审核窗口打开和关闭
                auditVisible:false,
                auditForm:{assigneeType:'',assigneeTypeName:'',assigneeId:'',userId:'',shyj:''},
                auditLabelCol: {
                    xs: { span: 24 },
                    sm: { span: 8 }
                },
                auditWrapperCol: {
                    xs: { span: 24 },
                    sm: { span: 12 }
                },
                //还原页面标题
                titleRe:null,
                //驳回窗口打开和关闭
                callbackVisible:false,
                //浏览器高度70%
                clientHeight:{"overflow":"scroll","height":(document.body.clientHeight*0.7)+'px'},
                //实例图片入参
                imagePara:{busNo: this._props.comData.busNo,procInstId:this._props.comData.procInstId},
            }
        },
        created() {
            // 数据初始化
            const params = {}
            params.dictFields = 'assigneeType'
            this.$http.post(getBatchDict,params).then(res => {
                this.dictData = res.result;
            })
            this.getOplogList();
            //判断当前签收状态是否需要签收
            if(this._props.comData.status=='wait_claim'){
                //需要签收
                this.acceptDisplay='';
                this.auditDisplay='none';
                this.entrustDisplay='none';
                this.transferDisplay='none';
                this.callBackDisplay='none';
                this.apostilleDisplay='none';
            }

        },
        methods:{
            // 发送请求获取日志列表数据
            getOplogList(){
                var param={
                    "automaticFlag": true,
                    "busNo": this._props.comData.busNo,
                    "rollbackFlag": true
                };
                this.$http.post(getListByBusNo,param).then((res) => {
                    var finishList=res.result.finishList;
                    this.timeLineItems=finishList;
                    //默认还原界面选取启动节点,若不存在启动节点则默认第一笔操作日志
                    var oplog=finishList[0];
                    for(var i=0;i<finishList.length;i++){
                        if(finishList[i].auType=='start'){
                            oplog= finishList[i];
                        }
                    }
                    //是否存在待办业务
                    if(res.result.doingFlag==true){
                        this.timeLineDoing=res.result.doingList;
                    }
                    this.clickTest(oplog);
                }).catch(() => {

                })
            },
            //根据oplog查询还原界面和数据进行还原
            clickTest(oplog){
                this.titleRe=oplog.actName;
                //根据日志节点id查询对应的还原组件和还原数据
                var param={
                    "busNo": oplog.busNo,
                    "oplogId": oplog.oplogId
                };
                this.$http.post(getDataVO,param).then((res) => {
                    if(res.result.formKeyList==undefined){
                        this.allComponents=["MissRePage"];
                    }else {
                        this.allComponents=res.result.formKeyList;
                        this.formData=res.result.formData;
                    }
                }).catch(() => {

                })
            },
            //签收
            accept(){
                //发送签收请求
                let param={
                    "taskId": this._props.comData.taskId,
                    "busNo":this._props.comData.busNo,
                    "flowNodeId": this._props.comData.flowNodeId
                };
                this.$http.post(taskClaim,param).then((res) => {
                    alert("签收成功")
                    this.acceptDisplay='none';
                    this.auditDisplay='';
                    this.entrustDisplay='';
                    this.transferDisplay='';
                    this.callBackDisplay='';
                    this.apostilleDisplay='';
                    //签收成功刷新左侧日志
                    this.getOplogList();
                }).catch(() => {

                })
            },
            //审核
            audit(){
                const params={};
                params.nodeId=this._props.comData.flowNodeId;
                this.$http.post(getAssigneeList,params).then((res) => {
                    if(res.result.length>0){
                        var assigneeType=res.result[0].assigneeType;
                        this.auditForm.assigneeType=assigneeType;
                        var assigneeTypeDict=this.dictData.assigneeType;
                        for(var i=0;i<assigneeTypeDict.length;i++){
                            if(assigneeType==assigneeTypeDict[i].dictKey){
                                this.auditForm.assigneeTypeName=assigneeTypeDict[i].dictValue;
                            }
                        }
                        this.dictData.assigneeId=[];
                        this.dictData.userId=[];
                        for(let i=0;i<res.result.length;i++){
                            var assigneeId=res.result[i].assigneeId;
                            var assigneeIdName=res.result[i].assigneeIdName;
                            var userId=res.result[i].userId;
                            var userIdName=res.result[i].userIdName;
                            this.dictData.assigneeId.push({
                                "assigneeId": assigneeId,
                                "assigneeIdName": assigneeIdName,
                            });
                            if(userId!=undefined&&userId!=''){
                                this.dictData.userId.push({
                                    "userId": userId,
                                    "userIdName": userIdName,
                                });
                            }
                        }
                    }
                    this.auditVisible=true;
                }).catch(() => {

                })
            },
            //委派
            entrust(){

            },
            //转办
            transfer(){

            },
            //驳回
            callback(){
                this.callbackVisible=true;
            },
            //加签
            apostille(){

            },
            //审核提交
            approve(authstatus){
                const param=
                    {
                        "executionId":this._props.comData.executionId,
                        "authStatus":authstatus,
                        "busNo":this._props.comData.busNo,
                        "authRemarks":this.auditForm.shyj,
                        "taskId":this._props.comData.taskId,
                        "assigneeType":this.auditForm.assigneeType,
                        "assigneeId":this.auditForm.assigneeId,
                        "assigneeUserId":this.auditForm.userId
                    };
                this.$http.post(taskComplete,param).then((res) => {
                    this.auditVisible=false;
                    this.$emit('Refresh');
                }).catch(() => {

                })
            },
            //驳回提交
            callBackSave(){
                //发送驳回请求

            },
            //关闭审核窗口
            onAuditClose(){
                this.auditVisible=false;
            },
        }
    }
</script>